<template>
  <div>
    <el-form label-width="6vw">
      <el-form-item :label="$t('editFormula.partNo')">
        <el-input
          v-model="config.partNo"
          :placeholder="$t('editFormula.partNo')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.describe')">
        <el-input
          v-model="config.partDesc"
          :placeholder="$t('editFormula.describe')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.long')">
        <el-input-number
          v-model="config.length"
          :placeholder="$t('editFormula.long')"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('editFormula.width')">
        <el-input-number
          v-model="config.width"
          :placeholder="$t('editFormula.width')"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('editFormula.coordinateX')">
        <el-input-number
          v-model="config.x"
          :placeholder="$t('editFormula.coordinateX')"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('editFormula.coordinateY')">
        <el-input-number
          v-model="config.y"
          :placeholder="$t('editFormula.coordinateY')"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('editFormula.rotation')">
        <el-input-number
          v-model="config.angle"
          :placeholder="$t('editFormula.rotation')"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <component :is="config.type" :config="config"></component>
  </div>
</template>
<script setup>
import { computed, watch } from "vue";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();
defineProps({
  config: {
    type: Object,
    default: () => ({}),
  },
});
</script>
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
